<template>
  <div>
    <!-- 搜索 -->
    <el-card class="box-card">
      <el-row type="flex" align="middle">
        <el-col>
          <el-tag>
            当前能量值:
            <span style="font-size: 18px;">{{ userInfo.ks_val ||0}}</span>
          </el-tag>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="init">刷新</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="changeEnergyNum">修改用户能量</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-table
        ref="multipleTable"
        style="margin-bottom:20px"
        :header-cell-style="{background:'#eee'}"
        border
        :data="tableData"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="ks_val" label="数值变化明细"></el-table-column>
        <el-table-column align="center" prop="title" label="操作类型"></el-table-column>
        <el-table-column align="center" prop="admin_name" label="操作人"></el-table-column>
        <el-table-column align="center" prop="add_time" label="操作时间">
          <template slot-scope="scope">{{ returnAddTime(scope.row.add_time) }}</template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="query.currentPage"
          :total="query.total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>
    <el-drawer
      title="修改能量球数量"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
          style="padding: 0 30px;"
        >
          <el-form-item label="增加或减少" prop="type">
            <el-radio-group v-model="ruleForm.type">
              <el-radio label="1">增加</el-radio>
              <el-radio label="2">减少</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="修改数量" prop="ks_val">
            <el-input-number
              :controls="false"
              style="widows: 100px;"
              :min="1"
              v-model="ruleForm.ks_val"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// import { userBoutique } from '@/api/consumer'
import { giveKsVal, ksLog } from '@/api/energy.js'
import { userInfo } from '@/api/consumer.js'
import { parseTime } from '@/utils/index'

export default {
  props: {
    user_id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules: {
        type: [
          { required: true, message: '请选择增加加或减少', trigger: 'change' }
        ],
        ks_val: [
          {
            type: 'number',
            required: true,
            message: '请输入修改数量',
            trigger: 'blur'
          }
        ]
      },
      drawer: false,
      direction: 'rtl',
      userInfo: {},
      userEnergy: {},
      // 分页数据
      //input
      ruleForm: {
        ks_val: '',
        type: ''
      },
      query: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      delIds: [],
      is_show: true
    }
  },
  mounted() {
    // this.getUserCoupon();
  },
  watch: {
    user_id(newVal, oldVal) {
      if (newVal) {
        this.init()
      }
    },
    methods: {
      // 获取用户盲盒
      // getUserBoutique() {
      //   userBoutique({
      //     user_id: this.user_id,
      //     page: this.query.currentPage,
      //     limit: this.query.pageSize
      //   }).then((res) => {
      //     this.tableData = res.data
      //     this.query.total = res.total
      //   })
      // }
      // this.getUserBoutique();
    }
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          giveKsVal(
            Object.assign(this.ruleForm, { user_id: this.user_id })
          ).then((res) => {
            if (res.st == 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.init()
              this.drawer = false
            } else {
              this.$message.error({
                message: res.msg,
                type: 'success'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.drawer = false
      this.$refs.ruleForm.resetFields()
      this.drawer = false
    },
    changeEnergyNum() {
      this.drawer = true
    },
    handleClose(done) {
      this.$refs.ruleForm.resetFields()
      this.drawer = false
    },
    queryAsk() {
      this.query.currentPage = 1
      this.getList()
    },
    init() {
      this.getList()
      userInfo({ id: this.user_id }).then((res) => {
        this.userInfo = res.data
      })
    },
    getList() {
      ksLog({
        user_id: this.user_id,
        page: this.query.currentPage,
        limit: this.query.pageSize
      }).then((res) => {
        this.tableData = res.data
        this.query.total = res.count
      })
    },
    async giveEnergy() {
      const res = await giveEnergy({
        user_id: this.user_id,
        energy: this.userEnergy.energy
      })
    },
    async getUserBoutique() {
      const res = await userBoutique({})
    },
    //重置
    queryReset() {
      // this.resetForm('query')
      this.query.total = 0
      this.query.currentPage = 1
      this.query.pageSize = 10
    },

    //分页改变
    currentChange(current) {
      this.query.currentPage = current
      this.getList()
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    returnAddTime(row) {
      return parseTime(row, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  }
}
</script>

<style lang='scss' scoped>
.box-card {
  margin-bottom: 10px;
}
</style>